import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ActivityIndicator,
  Image,
  ScrollView,
} from 'react-native';

import {
  Navbar,
  HText,
  Divider,
} from '../../DodLibrary/index';

const H12 = HText.H12;
const H14 = HText.H14;
const H16 = HText.H16;
const H18 = HText.H18;
const H20 = HText.H20;
const H24 = HText.H24;
const H30 = HText.H30;
const H36 = HText.H36;

// Button
class HTextPage extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View
        style={styles.container}>
        <Navbar
          title="HText"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView>
          <Divider />
          <H12 color="red" center >
            Inuyasha
          </H12>
          <H14 color="red" center >
            Inuyasha
          </H14>
          <H16 color="red" center >
            Inuyasha
          </H16>
          <H18 color="red" center >
            Inuyasha
          </H18>
          <H20 color="red" center >
            Inuyasha
          </H20>
          <H24 color="red" center >
            Inuyasha
          </H24>
          <H30 color="red" center >
            Inuyasha
          </H30>
          <H36 color="red" center >
            Inuyasha
          </H36>

        </ScrollView>
      </View>
    );
  }
}

// ButtonPage.navigationOptions = navigationOptionsConfig.ButtonPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default HTextPage;
